<template>
  <div class="tab_bar_item_container"
  @click="onClick">
    <div class="tab_bar_item_icon">
      <img :src="index===selectIndex?item.icon_active:item.icon"/>
    </div>
    <div :class="index===selectIndex?'tab_bar_item_title_active':'tab_bar_item_title'">{{item.title}}</div>
  </div>
</template>

<script>
export default {
  props:{
    item:{
      type:Object,
      required:true
    },
    selectIndex:{
      type:Number
    },
    index:{
      type:Number
    }
  },
  methods:{
    onClick(){
      this.$emit("changeIndex",this.index)
    }
  }
}
</script>

<style scoped>
.tab_bar_item_container
{
  width: 24%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.tab_bar_item_icon
{
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.tab_bar_item_icon img
{
  width: 26px;
}

.tab_bar_item_title
{
  color: #333;
}

.tab_bar_item_title_active
{
  color: red;
}

</style>